﻿@model string[]
<!DOCTYPE html>

<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Irina Grosu, Ana-Teodora Petrea">
    <meta name='robots' content='noindex,nofollow' />

    <link rel='stylesheet' id='font-css'
        href='http://fonts.googleapis.com/css?family=Open+Sans%3A400%2C700%2C300&#038;subset=latin%2Clatin-ext&#038;ver=3.6'
        type='text/css' media='all' />


    <link rel='stylesheet' id='revolution-fullwidth' href='assets/libraries/rs-plugin/css/fullwidth.css' type='text/css' media='all' />
    <link rel='stylesheet' id='revolution-settings' href='assets/libraries/rs-plugin/css/settings.css' type='text/css' media='all' />
    <link rel='stylesheet' id='bootstrap-css' href='assets/libraries/bootstrap/css/bootstrap.min.css' type='text/css' media='all' />
    <link rel='stylesheet' id='bootstrap-responsive-css' href='assets/libraries/bootstrap/css/bootstrap-responsive.min.css' type='text/css' media='all' />

    <link rel='stylesheet' id='pictopro-normal-css' href='assets/icons/pictopro-normal/style.css' type='text/css' media='all' />
    <link rel='stylesheet' id='justvector-web-font-css' href='assets/icons/justvector-web-font/stylesheet.css' type='text/css' media='all' />
    <link rel='stylesheet' id='chosen-css' href='assets/libraries/chosen/chosen.css' type='text/css' media='all' />

    <link rel='stylesheet' id='aviators-css' href='assets/css/jquery.bxslider.css' type='text/css' media='all' />
    <link rel='stylesheet' id='properta-css' href='assets/css/properta.css' type='text/css' media='all' />

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
    <script type='text/javascript' src='assets/js/aviators-settings.js'></script>
    <script type='text/javascript' src='assets/libraries/chosen/chosen.jquery.min.js'></script>
    <script type='text/javascript' src='assets/libraries/rs-plugin/js/jquery.themepunch.revolution.min.js'></script>
    <script type='text/javascript' src='assets/libraries/rs-plugin/js/jquery.themepunch.plugins.min.js'></script>
    <script type="text/javascript">

        // First, checks if it isn't implemented yet.
        if (!String.prototype.format) {
            String.prototype.format = function () {

                var args = arguments;
                var sprintfRegex = /\{(\d+)\}/g;

                var sprintf = function (match, number) {
                    return number in args ? args[number] : match;
                };

                return this.replace(sprintfRegex, sprintf);
            };
        }
    </script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {

            $("#inputKey").bind("change paste keyup", function () {
                if ($('#inputKey').val() !== "") {
                    sessionStorage.apikey = $('#inputKey').val();
                }
            });

            if (typeof (sessionStorage.apikey) !== "undefined") {
                $('#inputKey').val(sessionStorage.apikey);
            }

        });
    </script>

    <title>Social Mashup</title>
</head>

<body class="home page page-template">
    <div class="top">
        <div class="container">
            <div class="top-inner inverted">
                <div class="header clearfix">

                    <div class="branding pull-left">
                        <div class="logo">
                            <a href="http://www.flickr.com" target="_blank" title="Home">
                                <img src="/assets/img/ic-flickr.png" style="width: 40px; height: 40px" alt="Home">
                            </a>
                        </div>
                        <!-- /.logo -->

                        <div class="site-name">
                            <div class="OutlineElement Ltr SCX229200098">
                                <p class="Paragraph SCX229200098" paraid="1805585685" paraeid="{000fc438-6492-44ab-99e2-a785a7d5b550}{238}">
                                    <span class="r_entity r_creativework" itemscope="" itemtype="http://schema.org/CreativeWork">
                                        <span class="r_prop r_name" itemprop="name">
                                            <a href="/" title="Home" class="brand">Social Mashup
                                            </a></span>
                                        <meta itemprop="description" content="Mash-up that provides the end user with the possibility to retrieve content from different social and sharing websites based on search tags and their synonyms" />
                                        <meta itemprop="url" content="http://wadesoma.wordpress.com/" />
                                        <span itemprop="copyrightHolder" itemscope="" itemtype="http://schema.org/Organization">
                                            <meta itemprop="name" content="Faculty of Computer Science" />
                                            <meta itemprop="url" content="http://www.infoiasi.ro/" />
                                            <span itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
                                                <meta itemprop="description" content="Faculty of Computer Science UAIC address" />
                                                <meta itemprop="url" content="http://www.infoiasi.ro/" />
                                                <meta itemprop="email" content="secretariat@info.uaic.ro" />
                                                <meta itemprop="faxNumber" content="+40 232 201490" />
                                                <meta itemprop="telephone" content="+40 232 201090" />
                                                <meta itemprop="addressCountry" content="Romania" />
                                                <meta itemprop="addressLocality" content="Iasi" />
                                                <meta itemprop="addressRegion" content="Iasi" />
                                                <meta itemprop="postalCode" content="700483" />
                                                <meta itemprop="postOfficeBoxNumber" content="16" />
                                                <meta itemprop="streetAddress" content="General Berthelot" />
                                            </span>
                                            <meta itemprop="image" content="http://www.infoiasi.ro/bin/download/Main/WebHome/imgfcs.png" />
                                            <meta itemprop="email" content="secretariat@info.uaic.ro" />
                                            <meta itemprop="faxNumber" content="+40 232 201490" />
                                            <meta itemprop="logo" content="http://www.infoiasi.ro/skins/fii/logo_fii3.png" />
                                            <meta itemprop="telephone" content="+40 232 201090" />
                                        </span><span itemprop="accountablePerson" itemscope="" itemtype="http://schema.org/Person">
                                            <meta itemprop="image" content="http://students.info.uaic.ro/~irina.grosu/images/Irina_Grosu.png" />
                                            <meta itemprop="name" content="Irina Grosu" />
                                            <meta itemprop="url" content="http://students.info.uaic.ro/~irina.grosu/" />
                                            <span itemprop="address" itemscope="" itemtype="http://schema.org/PostalAddress">
                                                <meta itemprop="url" content="http://students.info.uaic.ro/~irina.grosu/" />
                                                <meta itemprop="contactType" content="home" />
                                                <meta itemprop="email" content="irina.grosu90@gmail.com" />
                                                <meta itemprop="telephone" content="+40 749 076 404" />
                                                <meta itemprop="addressCountry" content="Ireland" />
                                                <meta itemprop="addressLocality" content="Dublin" />
                                                <meta itemprop="addressRegion" content="Dublin" />
                                                <meta itemprop="postalCode" content="18" />
                                                <meta itemprop="postOfficeBoxNumber" content="61" />
                                                <meta itemprop="streetAddress" content="East Courtyard, Tullyvale" />
                                            </span><span itemprop="alumniOf" itemscope="" itemtype="http://schema.org/EducationalOrganization">
                                                <meta itemprop="name" content="Faculty of Computer Science Iasi" />
                                                <meta itemprop="url" content="http://www.infoiasi.ro/" />
                                                <meta itemprop="logo" content="http://www.infoiasi.ro/skins/fii/logo_fii3.png" />
                                            </span>
                                            <meta itemprop="birthDate" content="1990-06-18" />
                                            <meta itemprop="email" content="irina.grosu90@gmail.com" />
                                            <meta itemprop="familyName" content="Grosu" />
                                            <meta itemprop="jobTitle" content="Software Developement Engineer in Test" />
                                            <meta itemprop="nationality" content="Romanian" />
                                            <span itemprop="worksFor" itemscope="" itemtype="http://schema.org/Organization">
                                                <meta itemprop="name" content="Microsoft" />
                                                <meta itemprop="url" content="http://www.microsoft.com/" />
                                                <meta itemprop="logo" content="http://c.s-microsoft.com/en-us/CMSImages/mslogo.png?version=856673f8-e6be-0476-6669-d5bf2300391d" />
                                            </span></span>
                                        <meta itemprop="genre" content="Software Application" />
                                        <meta itemprop="inLanguage" content="en-us" />
                                        <meta itemprop="keywords" content="mash-up social keyword map" />
                                        <meta itemprop="dateCreated" content="2013-11-04" />
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div class="logo">
                            <a href="http://www.twitter.com" target="_blank" title="Home">
                                <img src="/assets/img/ic-twitter.png" style="width: 40px; height: 40px" alt="Home">
                            </a>
                        </div>

                        <!-- /.site-name -->
                    </div>

                    <div class="user-area pull-right">
                        <div class="menu-anonymous-container">
                            <ul id="menu-anonymous" class="nav nav-pills">
                                <li class="menu-item">
                                    <input type="text" name="filter_area_from" id="inputKey" placeholder="Api Key" style="margin-left: 30px; width: 450px" /></li>
                                <li class="menu-item"><a href="Register">Register</a></li>

                            </ul>
                        </div>
                    </div>
                    <!-- /.user-area -->
                </div>
                <!-- /.header -->
                <div class="navigation navbar clearfix">
                    <div class="pull-left">
                        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>

                    <div class="pull-right">
                        <div class="list-property">
                            <a href="">
                                <div class="ribbon"><span class="icon icon-normal-circle-plus"></span></div>
                            </a>
                        </div>
                        <!-- /.list-property -->
                    </div>
                    <!-- /.pull-right -->
                </div>
            </div>
        </div>
    </div>

    <div id="content" class="clearfix">
        <div class="map-wrapper">
            <div class="map">
                <script type="text/javascript">
                    function updateMap(infoBoxes, locats) {
                        jQuery(document).ready(function ($) {
                            var map = $('#map');
                            map.empty();
                            map.aviators_map({
                                locations: locats,
                                types: new Array('flickr-orig', 'flickr-orig', 'flickr-orig', 'flickr-orig', 'flickr-orig', 'flickr-orig', 'flickr-orig', 'flickr-orig', 'flickr-orig', 'flickr-orig', 'flickr-orig'),
                                contents: infoBoxes,
                                transparentMarkerImage: 'assets/img/marker-transparent.png',
                                transparentClusterImage: 'assets/img/markers/cluster-transparent.png',
                                zoom: 2,
                                center: {
                                    latitude: 0,
                                    longitude: 0
                                },
                                filterForm: '.map-filtering',
                                enableGeolocation: '',
                                pixelOffsetX: -75,
                                pixelOffsetY: -200
                            });
                        });
                    }

                </script>

                <script type="text/javascript">
                    var infoBoxes = [];
                    var locations = [];

                    updateMap(infoBoxes, locations);
                </script>

                <script type="text/javascript">
                    var map;
                    function deleteresource(el, type) {
                        var id = $(el).attr('id');
                        var values = id.split('_');
                        var urlVal;

                        if (type == 1) {
                            urlVal = '/api/resources/photos?tag=' + values[0] + '&id=' + values[1] + '&key=' + values[2];
                        }
                        else {
                            urlVal = '/api/resources/messages?tag=' + values[0] + '&id=' + values[1] + '&key=' + values[2];
                        }

                        //Split by tag and photoId

                        $.ajax({
                            url: urlVal,
                            type: "DELETE",
                            data: {
                                //Set an empty response to see the error
                                xml: "<response></response>"
                            },
                            dataType: "text json",
                            success: function (xml, textStatus, xhr) {
                                console.log(arguments);
                                console.log(xhr.status);
                                //   alert(textStatus);
                                map.aviators_map('removeSelectedMarker');
                            },
                            error: function (e) {
                                alert(JSON.stringify(e));
                            }
                        });
                    }

                    jQuery(document).ready(function ($) {
                        $('#search_button').click(function () {
                            // resource url, photo src - default "assets/img/property-tmp-small.png", photo alt;
                            // resource url, title, website, resource url
                            var divFormat =
                                '<div class="infobox clearfix">' +
                                   '<div class="remove">' +
                      //                  '<input class="remove" id="{9}_{10}_{11}" type="button" value="Delete" OnClick="deleteresource(this,{12});" />' +
                                        '<a id="{10}_{11}_{12}" title="Click to delete" value="Delete" href="#" onclick="deleteresource(this,{13});return false;">Delete</a>' +
                                      // '<p>Remove</p>' +
                                    '</div>' +
                                    '<div class="image">' +
                                        '<a href = "{0}" target="_blank">' +
                                            '<img src="{1}" alt="{2}" width="130px">' +
                                        '</a>' +
                                    '</div>' +
                                    '<div class="info">' +
                                        '<div class="title" target="_blank">' +
                                            '<a href="{0}" target="_blank">{3}</a>' +
                                        '</div>' +
                                        '<div class="location">{4}</div>' +
                                        '<div class="location">Tags: {5}</div>' +
                                        '<div class="location">Author: {6}</div>' +
                                        '<div class="location">Date: {7}</div>' +
                                        '<div class="location">Latitude: {8}</div>' +
                                        '<div class="location">Longitude: {9}</div>' +
                                        '<div class="link">' +
                                            '<a href="{0}" target="_blank">View more</a>' +
                                        '</div>' +
                                    '</div>' +
                                '</div>';


                            var tags = $('#inputTags').val();
                            var key = $('#inputKey').val();
                            var result = $('#noResults').val();
                            var useSynonyms = $("#use_synonyms").prop("checked");
                            map = $('#map');

                            map.aviators_map('removeMarkers');

                            var query = {
                                Tags: tags,
                                Results: result,
                                Key: key,
                                UseSynonyms: useSynonyms
                            }

                            $.ajax({
                                url: '/api/websites/flickr',
                                type: "POST",
                                data: query,
                                dataType: "text json",
                                success: function (xml, textStatus, xhr) {
                                    console.log(arguments);
                                    console.log(xhr.status);

                                    $.getJSON('/api/resources/photos?tags=' + tags + '&results=' + result + '&key=' + key + '&useSynonyms=' + useSynonyms, function (data) {
                                        var listPhotos = [];
                                        var listCoordinatesPhotos = [];
                                        var types = [];

                                        $.each(data, function () {

                                            var pf = divFormat.format(this.Url, this.ThumbnailUrl, this.PhotoName, this.PhotoName, this.Website, this.Tag, this.Author,
                                                this.Date.toString(), this.ResourceCoordinates.Latitude, this.ResourceCoordinates.Longitude, this.Tag, this.Id, key, 1);

                                            if (this.IsSynonym) {
                                                types.push('flickr-synonyms');
                                            }
                                            else {
                                                types.push('flickr-orig');
                                            }

                                            listPhotos.push(pf);

                                            // If multiple resources are on the same place move them a little bit arround so they can be seen
                                            var i;
                                            for (i = 0; i < listCoordinatesPhotos.length; ++i) {
                                                if (listCoordinatesPhotos[i][0] == this.ResourceCoordinates.Latitude &&
                                                    listCoordinatesPhotos[i][1] == this.ResourceCoordinates.Longitude) {
                                                    var number = Math.random() / 10.0;
                                                    if (i % 2 == 0) {
                                                        this.ResourceCoordinates.Latitude = this.ResourceCoordinates.Latitude + number;
                                                    }
                                                    else {
                                                        this.ResourceCoordinates.Longitude = this.ResourceCoordinates.Longitude + number;
                                                    }
                                                }
                                            }
                                            listCoordinatesPhotos.push([this.ResourceCoordinates.Latitude, this.ResourceCoordinates.Longitude]);
                                        });

                                        map.aviators_map('addMarkers', {
                                            locations: listCoordinatesPhotos,
                                            types: types,
                                            contents: listPhotos
                                        });
                                    });
                                },
                                error: function (e) {
                                    alert(e.statusText);
                                }
                            });

                            $.ajax({
                                url: '/api/websites/twitter',
                                type: "POST",
                                data: query,
                                dataType: "text json",
                                success: function (xml, textStatus, xhr) {
                                    console.log(arguments);
                                    console.log(xhr.status);

                                    $.getJSON('/api/resources/messages?tags=' + tags + '&results=' + result + '&key=' + key + '&useSynonyms=' + useSynonyms, function (data) {
                                        var listMessages = [];
                                        var listCoordinatesMessages = [];
                                        var types = [];

                                        $.each(data, function () {

                                            var pf = divFormat.format(this.Url, this.ThumbnailUrl, this.Message, this.Message, this.Website,
                                                 this.Tag, this.Author, this.Date.toString(), this.ResourceCoordinates.Latitude,
                                                 this.ResourceCoordinates.Longitude, this.Tag, this.Id, key, 2);
                                            console.log(pf);
                                            listMessages.push(pf);
                                            if (this.IsSynonym) {
                                                types.push('twitter-synonyms');
                                            }
                                            else {
                                                types.push('twitter-orig');
                                            }
                                            // If multiple resources are on the same place move them a little bit arround so they can be seen
                                            var i;
                                            for (i = 0; i < listCoordinatesMessages.length; ++i) {
                                                if (listCoordinatesMessages[i][0] == this.ResourceCoordinates.Latitude &&
                                                    listCoordinatesMessages[i][1] == this.ResourceCoordinates.Longitude) {
                                                    var number = Math.random() / 10.0;
                                                    if (i % 2 == 0) {
                                                        this.ResourceCoordinates.Latitude = this.ResourceCoordinates.Latitude + number;
                                                    }
                                                    else {
                                                        this.ResourceCoordinates.Longitude = this.ResourceCoordinates.Longitude + number;
                                                    }
                                                }
                                            }

                                            listCoordinatesMessages.push([this.ResourceCoordinates.Latitude, this.ResourceCoordinates.Longitude]);
                                        });



                                        map.aviators_map('addMarkers', {
                                            locations: listCoordinatesMessages,
                                            types: types,
                                            contents: listMessages
                                        });
                                    });
                                },
                                error: function (e) {
                                    //  alert(JSON.stringify(e));
                                }
                            });
                        });
                    });
                </script>
                <div id="map" class="map-inner" style="height: 500px"></div>
                <!-- /.map-inner -->

                <div class="container">
                    <div class="row">
                        <div class="span12">

                            <div class="property-filter widget filter-horizontal">
                                <div class="content">

                                    <form method="get" action="Home/Filter" class="form-inline map-filtering">
                                        <!--
                                        <div class="property-types" style="height: 1px !important; overflow: hidden;">
                                            <div class="property-type apartment">
                                                <label for="filter_type_6">
                                                    <input type="checkbox" name="filter_type[]" title="Apartment"
                                                        id="filter_type_photo" class="no-ezmark" value="6" checked>
                                                    Photos
                                                </label>
                                            </div>
                                            <div class="property-type building-area ">
                                                <label for="filter_type_42">
                                                    <input type="checkbox" name="filter_type[]" title="Building Area"
                                                        id="filtetr_type_42" class="no-ezmark" value="42" checked>
                                                    Tweets
                                                </label>
                                            </div>
                                        </div>
                                            -->
                                        <input type="text" value="" name="filter_area_from" id="inputTags"
                                            placeholder="Tags" style="width: 600px; margin-right: 30px; float: left">

                                        <input type="number" value="10" name="filter_area_from" id="noResults" style="width: 50px; margin-right: 30px; float: left">
                                        <label for="use_synonyms" style="color: white">Use synonyms</label>
                                        <input type="checkbox" id="use_synonyms" value="6" style="float: left" checked>
                                        <button id="search_button" class="btn btn-primary btn-large" type="submit">Search</button>
                                        <!-- /.general -->
                                    </form>
                                </div>
                                <!-- /.content -->
                            </div>
                            <!-- /.property-filter -->

                        </div>
                        <!-- /.span12 -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container -->

            </div>
            <!-- /.map -->
        </div>

        <!-- /.map-wrapper -->

    </div>
    <!-- /.breadcrumb -->


    <div class="footer-bottom">
        <div id="footer" class="footer container">
            <div id="footer-inner">
                <div class="row">
                    <div class="span6">
                        <div id="text-3" class="widget widget-text">
                            <div class="textwidget">&copy; 2014 Social Mashup, All Rights reserved</div>
                        </div>
                    </div>
                    <!-- /.copyright -->

                    <div class="span6">
                        <div id="nav_menu-3" class="widget widget-nav_menu">
                            <div class="menu-footer-links-container">
                                <ul id="menu-footer-links" class="menu">
                                    <li class="menu-item"><a href="Help">Help</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <!-- /.span6 -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /#footer-inner -->
        </div>
        <!-- /#footer -->
    </div>

    <script type='text/javascript' src='http://maps.googleapis.com/maps/api/js?v=3&#038;sensor=true&#038;ver=3.6'></script>
    <script type='text/javascript' src='assets/js/aviators-map.js'></script>
    <script type='text/javascript' src='assets/js/gmap3.infobox.min.js'></script>
    <script type='text/javascript' src='assets/js/bootstrap.min.js'></script>
    <script type='text/javascript' src='assets/js/retina.js'></script>
    <script type='text/javascript' src='assets/js/gmap3.clusterer.js'></script>
    <script type='text/javascript' src='assets/js/jquery.ezmark.js'></script>
    <script type='text/javascript' src='assets/js/carousel.js'></script>
    <script type='text/javascript' src='assets/js/jquery.bxslider.js'></script>
    <script type='text/javascript' src='assets/js/properta.js'></script>
    <script type='text/javascript' src='assets/js/jquery.bxslider.min.js'></script>
</body>
</html>
